{% extends 'main_frame.html' %} 

{% block content %}
{% include "search.html" %}
<table class="layui-hide" id="LAY_table" lay-filter="LAY_table"></table>
<script type="text/html" id="LAY_bar">
    <a class="layui-btn layui-btn-xs" lay-event="view" title="">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" title="">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete" title="">删除</a>
</script>
<div class="layui-bar-buttons">
    <span id="add_user">添加</span>
</div>
{% endblock %}


{% block js %}
<script>

var cols=[[
    {type: 'numbers',title: '序号',width: 60},
    {field:'userName',title: '用户名',width: 150},
    {field:'mobile',title: '手机号码',width: 150},
    {field:'email',title: '邮箱',width: 150},
    {field:'realName',title: '真实姓名',width: 150},
    {field:'nickName',title: '昵称',width: 150},
    {field:'sex',title: '性别',width: 150},
    {field:'birthday',title: '生日',width: 150},
    {field:'sumIntegral',title: '积分',width: 150},
    {field:'userMoney',title: '余额',width: 150},
    {field:'regTime',title: '注册时间',width: 150},
    {field:'btns',title: '操作',align: 'center',toolbar: '#LAY_bar',event:'click',fixed: 'right',width:160}
]]

//监听工具栏
layui.table.on('tool(LAY_table)', function(obj) {
    var data = obj.data;
    switch(obj.event){
        //查看
        case 'view' :
        Methods.view(data);
        break;
        //修改
        case 'edit' :
        Methods.info(data);
        break;
        //删除
        case 'delete' :
        Methods.delete(data);
        break;

        default:
        break;
    }
});
//方法集合
var Methods={
    render:function(where){
        layui.table.render({
            elem: '#LAY_table',
            method:'POST',
            contentType:'application/json',
            url:API.user.list,
            where:where,
            cols: cols,
            id: 'LAY_table',
            page: true,
            limits: [10, 15, 20, 30, 40, 50],
            loading: true,
            height: FX.getWinHeight(74),
            skin: '', //行边框风格
            even: true, //开启隔行背景
            size: 'big', //小尺寸的表格
            done:function(){

            }
        });
    },
    view:function(data){
        layer.open({
            type: 1,
            title:'信息',
            btn: ['关闭'],
            area:['640px','400px'],
            shadeClose:true,
            anim:5,
            content:function(){
                return FX.getView({
                    '用户名':data.userName,
                    '邮箱':data.email,
                    '手机号':data.mobile,
                    '邮箱':data.email,
                    '真实姓名':data.realName,
                    '昵称':data.nickName,
                    '性别':data.sex,
                    '生日':data.birthday,
                    '收货地址':data.addressId,
                    '头像':data.headPic
                })
            }(),
            yes:function(index, layero){
              layer.close(index);
            },
            end:function(){

            },
            success:function(layero,index){

            }
        });
    },
    info:function(obj){
        FX.ajax({
            url:API.user.info + obj.userId,
            success:function(res){
                if(res.code==0){
                    Methods.edit(res.data)
                }
            }
        })
    },
    edit:function(obj){
        layer.open({
            type: 1,
            title:'信息',
            btn: ['保存'],
            area:['640px','400px'],
            shadeClose:true,
            anim:5,
            content:function(){
                return renderForm([
                    { title:{name:'用户ID'},content:[{type:'hidden',name:'userId',disabled:true,value:obj.userId}]},
                    { title:{name:'用户名'}, content:[{type:'input',name:'userName',verify:true,value:obj.userName}]},
                    { title:{name:'手机号'}, content:[{type:'input',name:'mobile',verify:true,value:obj.mobile}]},
                    { title:{name:'邮箱'}, content:[{type:'input',name:'email',value:obj.email}]},
                    { title:{name:'真实姓名'}, content:[{type:'input',name:'realName',value:obj.realName}]},
                    { title:{name:'昵称'}, content:[{type:'input',name:'nickName',value:obj.nickName}]},
                    { title:{name:'性别'}, content:[{type:'select',name:'sex',value:obj.sex,options:[{text:'男',value:1},{text:'女',value:2}]}]},
                    { title:{name:'生日'}, content:[{type:'date',name:'birthday',value:obj.birthday}]},
                    { title:{name:'收货地址'}, content:[{type:'input',name:'addressId',value:obj.addressId}]},
                    { title:{name:'头像'}, content:[{type:'input',name:'headPic',value:obj.headPic}]}
                ])
                
            }(),
            yes:function(index, layero){
              layui.form.on('submit(lay-submit)', function(obj){
                  FX.ajax({
                    url:API.user.edit,
                    type:'post',
                    data:obj.field,
                    success:function(res){
                       FX.success('修改成功');
                       layer.close(index);
                    }
                  })
                  return false;
              });
              $("#lay_submit_btn").click();
            },
            end:function(){

            },
            success:function(layero,index){
                layui.form.render('select');
                FX.initDate();
            }
        })    
    },
    add:function(data){
        layer.open({
            type: 1,
            title:'信息',
            btn: ['保存'],
            area:['640px','400px'],
            shadeClose:true,
            anim:5,
            content:function(){
                return renderForm([
                    { title:{name:'用户名'}, content:[{type:'input',name:'userName',verify:true}]},
                    { title:{name:'密码'}, content:[{type:'password',name:'password',verify:true}]},
                    { title:{name:'手机号'}, content:[{type:'input',name:'mobile',verify:true}]},
                    { title:{name:'邮箱'}, content:[{type:'input',name:'email'}]},
                    { title:{name:'真实姓名'}, content:[{type:'input',name:'realName'}]},
                    { title:{name:'昵称'}, content:[{type:'input',name:'nickName'}]},
                    { title:{name:'性别'}, content:[{type:'select',name:'sex',options:[{text:'男',value:1},{text:'女',value:2}]}]},
                    { title:{name:'生日'}, content:[{type:'date',name:'birthday'}]},
                    { title:{name:'收货地址'}, content:[{type:'input',name:'addressId'}]},
                    { title:{name:'头像'}, content:[{type:'input',name:'headPic'}]}
                ])
                
            }(),
            yes:function(index, layero){
              layui.form.on('submit(lay-submit)', function(obj){
                  FX.ajax({
                    url:API.user.add,
                    type:'post',
                    data:obj.field,
                    success:function(res){
                       FX.success('添加成功');
                       layer.close(index);
                    }
                  })
                  return false;
              });
              $("#lay_submit_btn").click();
            },
            end:function(){

            },
            success:function(layero,index){
                layui.form.render('select');
                FX.initDate();
            }
        });
    },
    delete:function(obj){
        layer.confirm('是否删除',function(index){
            layer.close(index);
            FX.ajax({
                url:API.user.delete + obj.userId,
                success:function(res){
                    if(res.code==0){
                        FX.success('删除成功');
                    }
                }
            })
            
        })
    }
} 
$("#add_user").click(function(){
    Methods.add();
})


Methods.render();
FX.getSearch(WHERE.userList,Methods.render);

</script>
{% endblock %}